<template>
  <div>
    <el-form ref="form" :model="form" :rules="formRules">
        
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>

      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="form.age"></el-input>
      </el-form-item>

      <el-form-item label="出生日期" prop="birthday">
        <el-date-picker
          value-format="yyyy-MM-dd"
          v-model="form.birthday"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="form.remark"
          type="textarea"
          placeholder="请输入您要备注的内容"
          :rows="3"
        ></el-input>
      </el-form-item>

      <el-form-item label="性别" prop="sex">
        <el-radio v-model="form.sex" label="1">男</el-radio>
        <el-radio v-model="form.sex" label="2">女</el-radio>
      </el-form-item>

      <el-form-item label="出生地" prop="address">
        <el-select v-model="form.address" placeholder="请选择地址">
          <el-option
            v-for="(item, index) in options"
            :key="index"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="兴趣爱好" prop="hobby">
        <el-checkbox-group v-model="form.hobby">
          <el-checkbox label="1">打篮球</el-checkbox>
          <el-checkbox label="2">踢足球</el-checkbox>
          <el-checkbox label="3">打兵乓球</el-checkbox>
          <el-checkbox label="4">打羽毛球</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>

      <el-button type="primary" @click="confirm">确定</el-button>
      <el-button type="info" @click="reset">重置</el-button>

    {{ form }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      formRules: {
        name: [{ required: true, trigger: "change", message: "请输入姓名" }],
        age: [{ required: true, trigger: "change", message: "请输入年龄" }],
        birthday: [{ required: true, trigger: "change", message: "请选择生日"}],
        remark: [{ required: true, trigger: "change", message: "请输入备注"}],
        sex: [{ required: true, trigger: "change", message: "请选择性别" }],
        address: [{ required: true, trigger: "change", message: "请选择出生地" }],
        hobby: [{ required: true, trigger: "change", message: "请选择兴趣爱好" }],
      },
      options: [
        { value: "1", label: "广州" },
        { value: "2", label: "深圳" },
      ],
      form: {
        name: "",
        age: "",
        birthday: "",
        remark: "",
        sex: "1",
        hobby: ["2"],
        value: "",
      },
    };
  },
  methods: {
    confirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(校验通过);
        } else {
          return false;
        }
      });

      console.log(confirm);
    },
    reset() {
      this.$refs.form.resetFields();
    },
  },
};
</script>